import { Card, Space, Table, Image, Button, Timeline,Tag } from 'antd';
import { useLocation } from 'react-router-dom'
import { useEffect,useState } from 'react'
// 引入子组件
import Btns from './orderdetails/Btns';
import Logistics from './orderdetails/Logistics';
import { WechatFilled,AlipayCircleOutlined,SkypeOutlined} from '@ant-design/icons';

const { Column, ColumnGroup } = Table;
import './css/OrderDeatils.css'
import { getOrderDetailById } from '../../../api/OrderApi'
import myContext from '../../../utils/myContext'


interface DataType {
	key: React.Key;
	orderId: number;//订单编号
	orderCreated: string;//创建时间
	userId: string; //用户账号
	itemTotal: number;
	paymentMethod: number; //支付方式
	orderSource: number;//订单来源
	orderState: number; //订单状态
	skuPrice:number;//单价
	skuMsg:string;//商品属性
	itemNum:number;//数量
	goodsId:number;//商品id
	goodsName:string;//商品名称
	conName:string;//联系人姓名
	conAddress:string;//地址
	conPhone:string;//电话
	conId:number;//规格id
	payMoney:number;//支付总计
}

export default function OrderDeatils(){

	// 路由接受参数
	const locatioin = useLocation()
	// 解构出state
	const { state } = locatioin;
	console.log('state',state);
	
	// 声明订单详细信息
	const [orderInfo,setOrderInfo]=useState<DataType[]>([])

		// 请求订单详情信息
		useEffect(()=>{
			getOrderDetail()
		},[])

		// 获取详细信息的函数
		const getOrderDetail=()=>{
			getOrderDetailById({
				orderId:state.orderId
			}).then(res=>{
				console.log('订单详细信息',res.data);
				setOrderInfo([res.data])
			}).catch(err=>{
				console.log('err444',err);
				
			})
		}

		let goodsId={...orderInfo[0]}.goodsId;
		let conName={...orderInfo[0]}.conName;
		let conId={...orderInfo[0]}.conId;
		let conAddress={...orderInfo[0]}.conAddress;
		let conPhone={...orderInfo[0]}.conPhone;


	// 判断当前订单处于什么状态
	let oDiv = null
	
	if (state.status == 1 ||state.status == 3|| state.status == 2||state.status == 4) {
		{/* 按钮 */ }
		
			oDiv =<Btns value={{...state,goodsId,conName,conAddress,conPhone,conId}}></Btns>
		// </myContext.Provider>
		
	}else if(state.status == 5||state.status == 6 ) {
		 
		{/* 物流 */ }
		oDiv =<Logistics></Logistics>
	}else{
		oDiv =null
	}


	return (
		// 订单详情/
		<div className='orderdetails'>
			<myContext.Provider value={{getOrderDetail}}>
			<p className='head'>订单详情</p>
			<Card title="订单状态：" type="inner" className='detail_content'>
				{/* 订单信息 */}
				<div className="order_info">
					<h5>订单信息</h5>
					<Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item=>item.orderCreated}>
						<Column title="订单编号" dataIndex="orderId" key="orderId" />
						<Column title="订单状态" dataIndex="orderState" key="orderState" 
						 render={(_: any, record: DataType) => (
							record.orderState == 1 ? '待确认' : record.orderState == 2 ? '未支付' : 
							record.orderState == 3 ?'已支付' : record.orderState == 4 ?
							'未发货' : record.orderState == 5 ? '已发货' : record.orderState == 6 ? '已签收' : '已关闭'
						)}
						/>
						<Column title="支付方式" dataIndex="paymentMethod" key="paymentMethod" 
						render={(_:any, record:DataType) => (

							record.paymentMethod == 1 ?  <Tag icon={<WechatFilled />} color="#55acee">
							微信支付
						  </Tag> : record.orderSource == 2 ? <Tag color="#2db7f5" icon={<AlipayCircleOutlined/>}>支付宝支付</Tag> : 
						  <Tag color="#87d068" icon={<SkypeOutlined />}>其他支付</Tag>
						)}
						/>
						{/* <Column title="用户账号" dataIndex="userId" key="userId" /> */}
						<Column title="提交时间" dataIndex="orderCreated" key="orderCreated" />
						<Column title="订单来源" dataIndex="orderSource" key="orderSource" 
						 render={(_: any, record: DataType) => (
								record.orderSource == 1 ? <Tag color="#f50">App订单</Tag> : record.orderSource == 2 ? <Tag color="#2db7f5">PC订单</Tag> : <Tag color="#87d068">小程序订单</Tag>
						)}
						/>
					</Table>
				</div>
				{/* 收货人信息 */}
				<div className="addressee_info">
					<h5>收货人信息</h5>
					<Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item=>item.orderCreated}>
						<Column title="姓名" dataIndex="conName" key="conName" />
						<Column title="手机号" dataIndex="conPhone" key="conPhone" />
						<Column title="邮政编码" dataIndex="postalCode" key="postalCode" />
						<Column title="收获地址" dataIndex="conAddress" key="conAddress" />
					</Table>
				</div>
				{/* 商品信息 */}
				<div className="goods_info">
					<h5>商品信息</h5>
					<Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item=>item.orderCreated}>
						<Column title="商品名称" dataIndex="goodsName" key="goodsName" />
						<Column title="商品图片" dataIndex="skuImag" key="skuImag"
							render={(_: any, record: DataType) => (
								<Image
									className='goods_picture'
									width={100}
									height={100}
									src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
								/>
							)}
						/>
						<Column title="商品单价" dataIndex="skuPrice" key="skuPrice" />
						<Column title="属性" dataIndex="skuMsg" key="skuMsg" 
						  render={(_: any, record: DataType) => (
							<Tag>{record.skuMsg}</Tag>
						)}
						/>
						<Column title="商品数量" dataIndex="itemNum" key="itemNum" />
						<Column title="买家备注" dataIndex="remarks" key="remarks" />
						<Column title="小计" dataIndex="goods_total" key="goods_total"
							render={(_: any, record: DataType) => (
								// <span>{state[0].goods_price}</span>
								<span>{Number(orderInfo[0].skuPrice) * Number(orderInfo[0].itemNum)}</span>
							)}
						/>
					</Table>
				</div>

				{/* 费用合计 */}
				<div className="cost_total">
					<h5>费用合计</h5>
					<Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item=>item.conId}>
						<Column title="商品合计" dataIndex="itemTotal" key="itemTotal"
							render={(_: any, record: DataType) => (
								<span>{record.itemTotal}</span>
							)}
						/>
						<Column title="运费" dataIndex="transportationExpenses" key="transportationExpenses" />
						<Column title="优惠金额" dataIndex="preferentialAmount" key="preferentialAmount" />
						<Column title="费用合计" dataIndex="payMoney" key="payMoney"
							render={(_: any, record: DataType) => (
								<span>{record.payMoney}</span>
							)}
						/>
					</Table>
				</div>

				{/* 订单详情底部 */}
				{/* 如果是待确认状态 则底部有 确认订单 修改订单 关闭订单按钮 */}
				{/* 如果是待发货状态 则底部有  修改订单 关闭订单按钮 */}
				<div className="bottom_box">
					{/* 动态渲染的结构 */}
					{oDiv}
				</div>
			</Card>
			</myContext.Provider>	
		</div>
	)
}